<template>
  <div style="width: 320px; height: 308px">
    <el-card
      style="
        width: 320px;
        height: 308px;
        background-color: rgba(255, 255, 203, 0.4);
      "
    >
      <div
        class="flex h-[calc(100%-2rem)] w-[320] flex-col items-center justify-center gap-4"
      >
        <div>
          <div v-if="music" style="width: 280px">
            <div class="card-header">音乐详情</div>
            <h1 class="truncate text-center font-bold">{{ music.name }}</h1>
            <div class="text-left *:truncate">
              <p>作者：{{ music.author || "佚名" }}</p>
              <p>谱者：{{ music.transcribedBy || "佚名" }}</p>
            </div>
          </div>
        </div>
        <!-- 进度条区域 -->
        <div v-if="music" class="container items-center justify-center">
          <el-slider
            v-model="music.currentTime"
            :max="music.duration"
            @change="onProgressInput"
          ></el-slider>
          <span class="cursor-default"
            >{{ formatTime(music.currentTime) }} /
            {{ formatTime(music.duration) }}</span
          >
        </div>
        <div
          style="
            width: 100%;
            height: 35px;
            display: flex;
            justify-content: center;
            align-items: center;
          "
        >
          <!-- 倍速调整 -->
          <el-icon
            size="25px"
            color="#67C23A"
            class="mr-2 cursor-pointer"
            style="margin-left: 10px"
          >
            <Minus @click="playspeed(-1)" />
          </el-icon>
          <el-button
            size="small"
            type="warning"
            class="mr-2 w-20 cursor-pointer"
            style="margin-left: 10px"
          >
            X {{ speed }} 倍速
          </el-button>
          <el-icon
            size="25px"
            color="#F56C6C"
            class="mr-2 cursor-pointer"
            style="margin-left: 10px"
          >
            <Plus @click="playspeed(1)" />
          </el-icon>
          <el-icon
            size="25px"
            :color="music.isplay ? '#F56C6C' : '#409efc'"
            class="mr-2 cursor-pointer"
            style="margin-left: 10px"
            v-if="music"
          >
            <component
              :is="music.isplay ? VideoPlay : VideoPause"
              @click="music.isplay ? music.pause() : music.play()"
            />
          </el-icon>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { Plus, Minus, VideoPlay, VideoPause } from "@element-plus/icons-vue";
import { ref, onMounted, onBeforeUnmount } from "vue";
import { useRouter, useRoute } from "vue-router";
import type { Music } from "@/type/Music";
import { stringToMusic } from "@/type/Music";
import { message } from "@/utils/messages";
const router = useRouter();
const route = useRoute();
const music = ref<Music | null>(null);
const speed = ref(1);

// 倍速
const playspeed = (sond: number) => {
  if (sond == 1) {
    if (speed.value < 3) {
    speed.value = parseFloat((speed.value + 0.1).toFixed(1));
  }
  } else {
    if (speed.value > 0.3) {
    speed.value = parseFloat((speed.value - 0.1).toFixed(1));
  } else {
    speed.value = 0.3;
  }
  }
  music.value.setPlaybackRate(speed.value);
}

function formatTime(time: number) {
  const minutes = Math.floor(time / 60);
  const seconds = Math.floor(time % 60);
  return `${minutes}:${seconds.toString().padStart(2, "0")}`;
}

// function onProgressInput(e: Event) {
//   if (music.value) {
//     music.value.seekTo(parseFloat((e.target as HTMLInputElement).value));
//   }
// }
// 修改 onProgressInput 函数
function onProgressInput(value: number) {
  if (music.value) {
    music.value.seekTo(value);
  }
}

onMounted(() => {
  const { content } = route.query;
  if (content && typeof content === "string") {
    try {
      music.value = stringToMusic(content);
    } catch (e) {
      message("非合法 TXT 谱，重新选择", "error");
      router.push("/routine");
    }
  } else {
    router.push("/");
  }
});
// 在组件即将卸载时清空变量
onBeforeUnmount(() => {
  if (music.value) {
    music.value.pause();
  }
});
</script>

<style scoped>
.main-container {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(128, 128, 128, 0.2);
}

.card-container {
  width: 100%;
  height: 100%;
}

.card-header {
  font-size: 18px;
  font-weight: bold;
}

/* 音乐详情容器样式 */
.music-details-container {
  border: 1px solid #e2e8f0;
  /* 边框颜色 */
  border-radius: 4px;
  /* 边框圆角 */
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  /* 阴影效果 */
}
</style>
